<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>小类管理</title>
    <link href="/assets/css/main.css" rel="stylesheet">
    <link href="/css/order.css" rel="stylesheet">
    <link type="image/png" rel="shortcut icon" href="/assets/images/favicon.png">
</head>
<body>
<div id="preloader">
    <div id="status"></div>
</div>
<div class="boxed-layout">
    <header class="top-header theme-bg">
        <div class="container">
            <div class="row">
                <div class="col-lg-5">
                    <div class="jama-logo">
                        <a href="#"><img src="/assets/images/logo-topbar.gif" class="img-responsive" alt=""></a>
                    </div>
                </div>
                <div class="col-lg-7 align-self-center">
                    <div class="jama-info d-inline-flex">
                        <ul>
                            <li class="border-right"><i class="fa fa-phone me-1"></i> 15348361234</li>
                            <li><i class="fa fa-envelope me-1"></i>1192878959@qq.com</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="navigation">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <nav class="navbar navbar-expand-md navbar-dark">
                        <div class="navbar-header">
                            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
                                <span class="fa fa-navicon"></span>
                            </button>
                        </div>
                        <div class="justify-content-center collapse navbar-collapse" id="collapsibleNavbar">
                            <ul class="navbar-nav">
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle active" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">商品</a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
                                        <a class="dropdown-item" href="/cart/view">总类管理</a>
                                        <a class="dropdown-item" href="/cart/allProducts">大类管理</a>
                                        <a class="dropdown-item" href="/cart/allItems">小类管理</a>
                                    </div>
                                </li>
                                <li class="nav-item"><a class="nav-link" href="/main/view">首页</a></li>
                                <li class="nav-item"><a class="nav-link" href="/order/view">订单</a></li>
                                <li class="nav-item"><a class="nav-link" href="/account/view">用户</a></li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <div id="Catalog">
        <div>
            <a href="/cart/allProducts"
               style="
                   background-color: green;
                   border: 1px solid grey;
                   color: white;
                   border-radius: 4px;
                   padding: 8px 16px;
                   text-decoration: none;
                   display: inline-block;
                   font-size: 14px;
                   margin: 4px 2px;
                   cursor: pointer;
                   transition: background-color 0.3s;">返回</a>
            <h2><b>小类管理</b></h2>
            <table class="shopping-cart-table">
                <tr>
                    <th>小类ID</th>
                    <th>所属大类</th>
                    <th>价格</th>
                    <th>成本</th>
                    <th>供应商</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>

                <tr th:if="${items == null || items.isEmpty()}">
                    <td colspan="7" class="empty-cart">暂无小类数据.</td>
                </tr>

                <tr th:each="item : ${items}" th:id="'itemCol_' + ${item.itemId}">
                    <td th:text="${item.itemId}"></td>
                    <td th:text="${item.productId}"></td>
                    <td th:text="${item.listPrice}"></td>
                    <td th:text="${item.unitCost}"></td>
                    <td th:text="${item.supplierId}"></td>
                    <td th:text="${item.status}"></td>
                    <td>
                        <a th:href="'/cart/item/toEdit?itemId=' + ${item.itemId}"
                           style="
                              background-color: #2196F3;
                              border: none;
                              color: white;
                              padding: 6px 12px;
                              text-align: center;
                              text-decoration: none;
                              display: inline-block;
                              font-size: 14px;
                              margin: 2px;
                              cursor: pointer;
                              border-radius: 4px;
                              transition: background-color 0.3s;"
                           th:id="'editButton' + ${item.itemId}">
                            编辑
                        </a>
                        <a th:href="'/cart/item/delete?itemId=' + ${item.itemId}"
                           style="
                              background-color: #f44336;
                              border: none;
                              color: white;
                              padding: 6px 12px;
                              text-align: center;
                              text-decoration: none;
                              display: inline-block;
                              font-size: 14px;
                              margin: 2px;
                              cursor: pointer;
                              border-radius: 4px;
                              transition: background-color 0.3s;"
                           th:id="'deleteButton' + ${item.itemId}"
                           onclick="return confirm('确定要删除这个小类吗？');">
                            删除
                        </a>
                    </td>
                </tr>

                <tr class="action-buttons">
                    <td colspan="7">
                        <a href="/cart/item/toAdd" 
                           style="
                              background-color: #4CAF50;
                              border: none;
                              color: white;
                              padding: 8px 16px;
                              text-align: center;
                              text-decoration: none;
                              display: inline-block;
                              font-size: 14px;
                              margin: 4px 2px;
                              cursor: pointer;
                              border-radius: 4px;
                              transition: background-color 0.3s;">添加小类</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

<script src="/assets/js/jquery-3.4.1.min.js"></script>
<script src="/assets/js/bootstrap.bundle.min.js"></script>
<script src="/assets/js/swiper.min.js"></script>
<script src="/assets/js/jquery.mixitup.min.js"></script>
<script src="/assets/js/main.js"></script>
</body>
</html> 